建好專案之後，來看看專案裡已經幫你準備好哪些檔案吧！先大致認識每個資料夾如何分門別類的規則，日後自己在歸檔時也會相對有概念，更方便管理檔案、組織架構。

根目錄層

1. public：主要放置 index.html 等公用資源

2. dist：執行 npm run build 打包之後才會產生的資料夾，所以剛開始不會出現在根目錄中

3. src：開發專案主要存放檔案的資料夾

4. 配置檔們（.browserslistrc、.eslintrc.js、babel.config.js 等）：可依專案需求新增配置檔

   • 新增 .prettierrc 自訂 Prettier formatter 的設定值

       "printWidth": 100,   // 每行寬度限定字元數（預設 80 字元）
       "singleQuote": true, // 是否使用單引號（預設 false）
     

   • 新增 vue.config.js 設定 webpack 全域引入共享 SCSS 資源

     module.exports = {
       css: {
         loaderOptions: {
           scss: {
             additionalData: `
             @import "@/assets/scss/styles/_color.scss";
             `,
           },
         },
       },
     };
     

5. 專案資訊檔們：

   • node_modules：存放安裝的所有套件
   • .gitignore：設定 git 忽略追蹤的檔案規則，呈現灰色，例如 node_modules、/dist 等
   • package.json：記錄專案設定、npm 執行指令以及所使用的套件
   • package-lock.json：記錄並鎖定專案所安裝的套件來源及版本

src 主場層（source）

1. assets：存放靜態資源，例如 images、css 等
2. components：存放自定義的元件
3. router：存放所設置的路由元件
4. store：存放 Vuex 管理的狀態庫
5. views：存放顯示在畫面上的路由元件
   • 將 components 裡的元件引入給 views 裡的路由元件使用，例如在 Home.vue 中就使用了 HelloWorld.vue 元件

     <script>
     import HelloWorld from "@/components/HelloWorld.vue";
     
     export default {
       name: "Home",
       components: {
         HelloWorld,
       },
     };
     </script>
     

6. App.vue：整個專案裡的核心主件，在此進行切換路由元件並渲染出相應頁面
   • 以巢狀結構來看，App.vue 會是第一層，其他路由元件則會列在第二層之後，因此也可考慮在此層放置所有頁面都存有的共通元件作為固定班底，例如 Header、Navbar、Footer 等
7. main.js：程式進入點，完成初始化 Vue instance 並掛載到 App.vue 上
   • 同時會將專案中所需的 plugins 引入至此

依專案規模可在 src 新增其他目錄

1. plugins：放置 Vue 相關的插件，例如 BootstrapVue、Vue I18n 等
2. utils：放置通用檔案，例如 axios 等

參考資料

• Vue CLI - Passing Options to Pre-Processor Loaders